<template>
    <div>
        <!--头部-->
        <div style="background-color:#0D6FC4;height: 100px; display: flex; align-items: center;">
            <!-- 系统名称和系统头像部分 -->
            <div style="width: 100%; display: flex;font-size:24px; color: white;padding:20px; flex: 1; justify-content: flex-start;">
                <el-icon><ElementPlus /></el-icon>
                卖家管理系统
            </div>
            <!-- 用户头像和用户名部分 -->
            <div style="width: 80%; display: flex; justify-content: flex-end; flex: 1; align-items: center;margin-right: 10px">
                <el-avatar
                        :src="data.user.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" alt=""
                />
                <span style="color:white;margin-left:5px ">欢迎！{{data.user.name}}{{data.user.username}}！</span>
            </div>
        </div>

      <div style="display: flex;margin-top: 10px">
        <!--左侧导航菜单开始-->
        <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
         <el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
         <el-menu-item index="/manager/products" ><el-icon><House /></el-icon>系统首页</el-menu-item>
             <el-sub-menu index="1">
                 <template #title>
                     <el-icon><MessageBox /></el-icon>
                     <span>商品管理</span>
                 </template>
                 <el-menu-item index="/manager/orders">订单管理</el-menu-item>
                 <el-menu-item index="/manager/services">售后服务</el-menu-item>
<!--                 <el-menu-item index="/manager/orders">订单管理</el-menu-item>-->
               <el-menu-item index="/manager/logistics">物流管理</el-menu-item>
<!--                 <el-menu-item index="/manager/listedproduct">查看上架商品</el-menu-item>-->
<!--               <el-menu-item index="/manager/products">查看上架商品</el-menu-item>-->
             </el-sub-menu>
           <el-menu-item index="/manager/merchant-apply"><el-icon><Avatar /></el-icon>商家认证</el-menu-item>
             <el-sub-menu index="2">
                 <template #title>
                     <el-icon><Female /></el-icon>
                     <span>用户管理</span>
                 </template>
                 <el-menu-item index="/manager/buyer">买家信息</el-menu-item>
             </el-sub-menu>
             <el-menu-item index="/manager/publicProduct"><el-icon><Files /></el-icon>发布商品</el-menu-item>
             <el-menu-item index="/manager/password"><el-icon><EditPen /></el-icon>修改密码</el-menu-item>
             <el-menu-item @click="logout" ><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item>
          </el-menu>
        </div>
        <!--右侧开始-->
        <div style="flex: 1; background-color: #f8f8ff; padding: 10px;">
          <RouterView @updateUser="updateUser"/>
        </div>
      </div>
</div>

    </template>

<script setup>
    import router from "@/router/index.js";
    import { reactive,ref } from 'vue';
    import request from "@/utils/request.js";
    import {Avatar, ElementPlus, Female, House, MessageBox, UserFilled} from '@element-plus/icons-vue'
    const updateUser = () =>{
        data.user = JSON.parse(localStorage.getItem('xm-pro-user'))
    }
    const data = reactive({
        user:JSON.parse(localStorage.getItem('xm-pro-user'))//字符串转为json对象
    })

    const logout = () =>{
        localStorage.removeItem('xm-pro-user')
        location.href='/login'
    }
</script>

<style>
.el-menu .is-active {
    background-color: #d6deec !important;
    color: #5574a5;
}

.el-menu .is-active .el-sub-menu__title {
    background-color:white !important;

}
</style >
